<template>
  <div style="position: relative; width: 100%; height: 100vh; overflow: hidden">
    <img
      :src="props.imgSrc"
      class="drag_box"
      draggable="true"
      @dragstart="dragstart"
      @dragend="dragend"
      :style="{
        left: `${elLeft}px`,
        top: `${elTop}px`,
      }"
    />
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";

// 接收父组件传入的参数（props）
const props = defineProps({
  imgSrc: String,
});

// 定义事件
const emit = defineEmits();

// 定义响应式变量
let elLeft = ref(window.innerWidth / 2); // 初始化 left
let elTop = ref(window.innerHeight / 2); // 初始化 top
let startPosition = ref({ x: 0, y: 0 }); // 记录拖拽开始时的鼠标位置

// 拖拽开始事件
function dragstart(e) {
  startPosition.value = { x: e.clientX, y: e.clientY }; // 记录开始时的鼠标位置
  emit("dragstart", startPosition.value);
}

// 拖拽结束事件
function dragend(e) {
  elLeft.value += e.clientX - startPosition.value.x; // 更新元素的左偏移量
  elTop.value += e.clientY - startPosition.value.y; // 更新元素的上偏移量
  emit("dragend", { x: elLeft.value, y: elTop.value });
}
</script>

<style scoped>
.drag_box {
  position: absolute;
  user-select: none;
  cursor: move;
  height: 70%;
  transform-origin: center center; /* 确保缩放从中心点开始 */
}
</style>
